<template>
    <!-- 这是一个中等大小按钮 -->
    <div class="btn" ref="btn">
        <span class="btn-text">{{text}}</span>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    props: {
        text: {     //按钮文字
            type: String,
            default: "这是一个按钮"
        },
        bg: {       //按钮背景
            type: String,
            default: "#fcdb00"
        },
        color:{     //文字颜色
            type: String,
            default: "#333"            
        }
    },
    mounted() {
        this._initSet()
    },
    methods: {
        //初始设置按钮样式
        _initSet() {    
            this.$refs.btn.style.background = this.bg
            this.$refs.btn.style.color = this.color
        },
        //设置背景色
        setBgcolor(col) {
            this.$refs.btn.style.background = col
            // alert(1)
        }
    }
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";

    .btn{
        height:40px;
        line-height:40px;
        // background:@color-yellow;
        border-radius:5px;
        // color:#333;
        text-align:center;
        margin: 0 10px;
        max-width: 100%;
        .btn-text{
            font-size:14px;
            line-height:inherit;
            letter-spacing:1px;
        }
    }
</style>
